import React from 'react'
import PropTypes from 'prop-types'
import {connect} from 'dva'
import {Row, Col, Card} from 'antd'
import {color} from 'utils'
import {Page} from 'components'
import RecentSales from './components/recentSales'
import styles from './index.less'

const bodyStyle = {
  bodyStyle: {
    height: 432,
    background: '#fff',
  },
}

function Dashboard ({dashboard, loading}) {
  const {recentSales} = dashboard

  return (
    <Page loading={loading.models.dashboard} className={styles.dashboard}>
      <Row gutter={24}>
        <Col lg={24} md={24}>
          <Card bordered={false} {...bodyStyle}>
            <RecentSales data={recentSales}/>
          </Card>
        </Col>
      </Row>
    </Page>
  )
}

Dashboard.propTypes = {
  dashboard: PropTypes.object,
  loading: PropTypes.object,
}

export default connect(({dashboard, loading}) => ({dashboard, loading}))(Dashboard)
